@import "@/common/constants/StyleConst.scss";

.table-wrap {
  height: calc(100% - 84px);
  margin-top: 24px;

  ::v-deep .v-data-table__wrapper {
    overflow-x: unset;
    overflow-y: unset;

    .add-icon::before {
      width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 12px;
      background-color: $color-theme-lightblue;
      margin-right: 13px;
      color: $color-theme-lightgrey;
      font-size: 20px;
      font-weight: 700;
      text-align: center;
    }

    .v-data-table-header {
      background-color: $color-theme-lightgrey;
    }

    thead {
      overflow: hidden;

      tr {
        th {
          height: 40px;
          border-bottom: unset !important;

          span {
            font-weight: 700;
            font-size: 14px;
            color: $color-theme-grey;
          }

          .all {
            font-weight: 700;
            color: $color-theme-grey;
            font-size: 14px;
          }

          .v-input__control {
            .v-input__slot {
              .v-input--selection-controls__input {
                .v-input--selection-controls__ripple {
                  border-radius: 50%;
                }

                span {
                  display: none;
                }
              }
            }
          }

          .align-items {
            .v-icon.v-icon::after {
              width: unset;
              height: unset;
            }
          }
        }

        :nth-child(1) {
          border-radius: 8px 0 0 8px;
        }

        :last-child {
          border-radius: 0 8px 8px 0;

        }
      }

    }

    tbody {
      tr {
        &.v-data-table__selected {
          background-color: transparent;
        }

        td {
          height: 40px;
          border-bottom: unset !important;
          font-size: 12px;
          color: $color-theme-grey;

          .v-input__control {
            .v-input__slot {
              .v-input--selection-controls__input {
                .v-input--selection-controls__ripple {
                  border-radius: 50%;

                }

                span {
                  display: none;
                }
              }
            }
          }
        }

        :nth-child(1) {
          border-radius: 8px 0 0 8px;
        }

        :last-child {
          border-radius: 0 8px 8px 0;

        }

        .add-icon {
          visibility: hidden;
        }

        .action {
          visibility: hidden;
        }

        &:hover {
          box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
          border-radius: 8px;

          .action {
            visibility: visible;
            align-items: center
          }
        }

        &:nth-child(even) {
          background: rgba(236, 237, 238, 0.4);
        }
      }
    }
  }
}